List Groups

A simple list group consists of an unordered list with individual list items.

Output 1:

Active State

• Active item
• Second item
• Third item

Apply the .active class to indicate the currently selected item.

Output 2:

List Group With Linked Items

For a list group with links, use <div> in place of <ul> and <a> instead of <li> You can also add the .list-group-item-action class to enable a grey hover effect.

Output:

Disabled Item

The .disabled class gives disabled items a lighter text color and removes the hover effect on links.

Output:

Flush / Remove Borders

Apply the .list-group-flush class to eliminate certain borders and corner rounding from the list group.

Output:

Numbered List Groups

Use the .list-group-numbered class to create list items with numbers in front of them:

Output:

Horizontal List Groups

To display list items side by side instead of stacked, add the .list-group-horizontal class to the .list-group element

• First item
• Second item
• Third item
• Fourth item

Output:

Link items with Contextual Classes

Output:

List Group with Badges

Use .badge along with utility classes to place badges within list group items.

Output: